<!-- src/views/teacher/Dashboard.vue -->
<template>
  <div class="dashboard">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <span>教师控制台</span>
        </div>
      </template>
      <div class="welcome-content">
        <h2>欢迎您，{{ profile.name || profile.username }}</h2>
        <p>在这里您可以管理您的学生、审核实习报告以及评定成绩。</p>
      </div>
    </el-card>

    <el-row :gutter="20" class="stats-section">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon bg-blue">
              <User />
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.studentsCount || 0 }}</div>
              <div class="stat-label">指导学生</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon bg-green">
              <Document />
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.pendingReports || 0 }}</div>
              <div class="stat-label">待审报告</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon bg-orange">
              <Star />
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.pendingGrades || 0 }}</div>
              <div class="stat-label">待评成绩</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="quick-actions">
      <template #header>
        <div class="card-header">
          <span>快捷操作</span>
        </div>
      </template>
      <div class="actions-grid">
        <el-button type="primary" @click="$router.push('/teacher/students')">
          学生管理
        </el-button>
        <el-button type="success" @click="$router.push('/teacher/reports')">
          报告审核
        </el-button>
        <el-button type="warning" @click="$router.push('/teacher/grades')">
          成绩评定
        </el-button>
        <el-button @click="$router.push('/teacher/profile')">
          个人信息
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useTeacherStore } from '../../store/teacher'
import {
  User,
  Document,
  Star
} from '@element-plus/icons-vue'

const teacherStore = useTeacherStore()

const profile = ref({
  username: '',
  name: ''
})

const stats = ref({
  studentsCount: 0,
  pendingReports: 0,
  pendingGrades: 0
})

// 获取教师个人信息
const fetchProfile = async () => {
  try {
    const data = await teacherStore.getProfile()
    profile.value = data
  } catch (error) {
    console.error('获取个人信息失败:', error)
  }
}

// 获取统计数据
const fetchStats = async () => {
  try {
    const data = await teacherStore.getDashboardStats()
    stats.value = data
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

onMounted(() => {
  fetchProfile()
  fetchStats()
})
</script>

<style scoped>
.welcome-card {
  margin-bottom: 20px;
}

.welcome-content h2 {
  margin-bottom: 10px;
}

.stats-section {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-item {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  color: white;
  font-size: 24px;
}

.bg-blue {
  background-color: #409eff;
}

.bg-green {
  background-color: #67c23a;
}

.bg-orange {
  background-color: #e6a23c;
}

.stat-info .stat-number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-info .stat-label {
  color: #909399;
}

.quick-actions {
  margin-top: 20px;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}
</style>
